<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vender/jquery-3.4.1/jquery.min.js"></script>
    <style>
        html {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #map-box {
            float: left;
            width: calc(100% - 280px);
            background: #cccccc;
            height: 100%;
            position: relative;
        }

        #map-div {
            position: absolute;
            top: 0;
            left: 0;
            overflow: auto;
            height: 100%;
            width: 100%;
        }

        #car-mask {
            position: absolute;
            background-color: red;
            opacity: 0.3;
            text-align: center;
            cursor: pointer;
        }

        .car-font {
            width: 100%;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.5);
            padding: 0;
            color: #FFFFFF;
            text-align: center;
        }

        #zoom-box {
            position: absolute;
            height: 5%;
            width: 10%;
            right: 5%;
            bottom: 5%;
        }

        #map-note {
            position: absolute;
            bottom: 5%;
            left: 4%;
            height: 110px;
            width: 95px;
            overflow: hidden;
            background: #ffffff;
            padding: 4px 0;
            border-radius: 6px;
            box-shadow: 0px 0px 2px 1px #bfbfbf;
        }

        #map-note p {
            text-align: center;
            color: #595959;
            font-size: 14px;
            margin-top: 11px;
            margin-bottom: 0;
        }

        #map-note p i {
            font-style: normal;
            display: inline-block;
            width: 22px;
            height: 22px;
            color: #ffffff;
            font-size: 12px;
            text-align: center;
            line-height: 22px;
            border-radius: 11px;
            margin-right: 7px;
        }
    </style>
</head>
<body>
<div id="map-box">
    <!--地图-->
    <div id="map-div" onmousedown="showCoord(this,event)">
        <!--地图图片-->
        <img id="map-img" src="map/map.png" alt="map"/>
        <!--定位框-->
        <div id="car-mask" onmousedown="moveCoord(this,event)" style="width:100px;height:160px;top:400px;left:400px;">
            <div id="car-font" class="car-font">售</div>
        </div>
        <!--车位-->
        <div class="car-font label-park" style="top:3931px;left:220px;background-color:#38C457;">售</div>
        <div class="car-font label-park" style="top:3897px;left:333px;background-color:#FABA50;">订</div>
        <div class="car-font label-park" style="top:3853px;left:466px;background-color:#EF5350;">售</div>
    </div>
    <!--说明-->
    <div id="map-note">
        <p><i class="keshou" style="background-color:#38C457;">售</i>可购买</p>
        <p><i class="yiding" style="background-color:#FABA50;">订</i>已预订</p>
        <p><i class="yikshou" style="background-color:#EF5350;">售</i>已售出</p>
    </div>
    <!--缩放-->
    <div id="zoom-box">
        <div class="buttons">
            <button class="zoom-in" onClick="zoomIn()">放大</button>
            <button class="zoom-out" onClick="zoomOut()">缩小</button>
        </div>
    </div>
</div>
<div>
    <button onclick="addPark()">添加</button>
</div>
<script>
    var check = false;
    //定位车位字体设置
    function fontUpdate() {
        var width = $('#car-mask').width();
        var carFont = $('.car-font');
        carFont.css({
            'width': width + 'px',
            'border-radius': (width / 2) + 'px',
            'line-height': width + 'px',
            'font-size': (width / 2) + 'px'
        });
    };
    fontUpdate();
    //定位车位不跟随
    $('#map-div #map-img').mouseover(function () {
        check = true;
    });
    $('#map-div #map-img').mouseout(function () {
        check = false;
    });
    //缩小
    function zoomOut() {
        var mapDiv = $('#map-div');
        var scrollTop = mapDiv.scrollTop();
        var scrollLeft = mapDiv.scrollLeft();
        mapDiv.scrollTop(0);
        mapDiv.scrollLeft(0);

        var mapImg = $('#map-img');
        var widthBefore = mapImg.width();
        var heightBefore = mapImg.height();
        mapImg.width(widthBefore / 1.2);
        mapImg.height(heightBefore / 1.2);

        var carMask = $('#car-mask');
        var top = carMask.get(0).offsetTop || parseFloat(carMask.get(0).style.top);
        var left = carMask.get(0).offsetLeft || parseFloat(carMask.get(0).style.left);
        carMask.css({
            'height': (carMask.height() / 1.2) + 'px',
            'width': (carMask.width() / 1.2) + 'px',
            'top': (top / 1.2) + 'px',
            'left': (left / 1.2) + 'px'
        });

        var labelPark = $('.label-park');
        for (let i = 0; i < labelPark.length; i++) {
            var parkTop = labelPark.eq(i).get(0).offsetTop || parseFloat(labelPark.eq(i).get(0).style.top);
            var parkLeft = labelPark.eq(i).get(0).offsetLeft || parseFloat(labelPark.eq(i).get(0).style.left);
            labelPark.eq(i).css({
                'top': (parkTop / 1.2) + 'px',
                'left': (parkLeft / 1.2) + 'px'
            });
        }

        fontUpdate();
        mapDiv.scrollTop(scrollTop / 1.2);
        mapDiv.scrollLeft(scrollLeft / 1.2);
        mapImg.fadeIn(100);
    };
    //放大
    function zoomIn() {
        var mapDiv = $('#map-div');
        var scrollTop = mapDiv.scrollTop();
        var scrollLeft = mapDiv.scrollLeft();
        mapDiv.scrollTop(0);
        mapDiv.scrollLeft(0);

        var mapImg = $('#map-img');
        var widthBefore = mapImg.width();
        var heightBefore = mapImg.height();
        mapImg.width(widthBefore * 1.2);
        mapImg.height(heightBefore * 1.2);

        var carMask = $('#car-mask');
        var top = carMask.get(0).offsetTop || parseFloat(carMask.get(0).style.top);
        var left = carMask.get(0).offsetLeft || parseFloat(carMask.get(0).style.left);
        carMask.css({
            'height': (carMask.height() * 1.2) + 'px',
            'width': (carMask.width() * 1.2) + 'px',
            'top': (top * 1.2) + 'px',
            'left': (left * 1.2) + 'px'
        });

        var labelPark = $('.label-park');
        for (let i = 0; i < labelPark.length; i++) {
            var parkTop = labelPark.eq(i).get(0).offsetTop || parseFloat(labelPark.eq(i).get(0).style.top);
            var parkLeft = labelPark.eq(i).get(0).offsetLeft || parseFloat(labelPark.eq(i).get(0).style.left);
            labelPark.eq(i).css({
                'top': (parkTop * 1.2) + 'px',
                'left': (parkLeft * 1.2) + 'px'
            });
        }

        fontUpdate();
        mapDiv.scrollTop(scrollTop * 1.2);
        mapDiv.scrollLeft(scrollLeft * 1.2);
        mapImg.fadeIn(100);
    };
    //获取当前坐标值
    function locationUpdata() {
        //区域图宽高
        var mapImg = $('#map-img');
        var scale = mapImg.get(0).naturalWidth / mapImg.width();
        var carMask = document.getElementById("car-mask");
        if (carMask) {
            var t = carMask.offsetTop || parseFloat(carMask.style.top);
            var l = carMask.offsetLeft || parseFloat(carMask.style.left);
            var x = l * scale;
            var y = t * scale;
            console.log(x + '-' + y);
        }
    }
    //鼠标点击后canvas到鼠标点击位置
    function showCoord(canvas, event) {
        if (!check) {
            return false;
        }
        var node = $(canvas);
        var x = event.clientX + node.scrollLeft();
        var y = event.clientY + node.scrollTop();
        node.children('#car-mask').css({left: x, top: y});
        locationUpdata();
    }
    //鼠标拖动后定位车位到鼠标拖动位置
    function moveCoord(canvas, event) {
        var event = event || window.event;
        event.preventDefault();
        /*用于保存小的div拖拽前的坐标*/
        var offsetLeft = canvas.offsetLeft || parseFloat(canvas.style.left);
        var offsetTop = canvas.offsetTop || parseFloat(canvas.style.top);
        var startX = event.clientX - offsetLeft;
        var startY = event.clientY - offsetTop;
        document.onmousemove = function (event) {
            canvas.style.left = event.clientX - startX + 'px';
            canvas.style.top = event.clientY - startY + 'px';

            var maxX = $('#map-img').width() - $(canvas).width();
            var maxY = $('#map-img').height() - $(canvas).height();
            /*对于大的DIV四个边界的判断*/
            if (event.clientX - startX <= 0) {
                canvas.style.left = 0 + 'px';
            }
            if (event.clientY - startY <= 0) {
                canvas.style.top = 0 + 'px';
            }
            if (event.clientX - startX >= maxX) {
                canvas.style.left = maxX + 'px';
            }
            if (event.clientY - startY >= maxY) {
                canvas.style.top = maxY + 'px';
            }
        };
        /*鼠标的抬起事件,终止拖动*/
        canvas.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
            locationUpdata();
        };
    }
    //定位车位移动
    document.onkeydown = function (event) {
        var park = document.getElementById('car-mask');
        event = event || window.event;
        event.preventDefault();
        var keyCode = event.keyCode;
        var t = park.offsetTop || parseFloat(park.style.top);
        var l = park.offsetLeft || parseFloat(park.style.left);

        var maxX = $('#map-img').width() - $('#car-mask').width();
        var maxY = $('#map-img').height() - $('#car-mask').height();

        if (keyCode == 38) {//按上键
            event.preventDefault();
            if (t - 1 > 0) {
                park.style.top = t - 1 + 'px';
            } else {
                park.style.top = '0px';
            }
            locationUpdata();
        }
        else if (keyCode == 37) {//按左键
            event.preventDefault();
            if (l - 1 > 0) {
                park.style.left = l - 1 + 'px';
            }
            else {
                park.style.left = '0px';
            }
            locationUpdata();
        }
        else if (keyCode == 39) {//按右键
            event.preventDefault();
            if (l + 1 < maxX) {
                park.style.left = l + 1 + 'px';
            }
            else {
                park.style.left = maxX + 'px';
            }
            locationUpdata();
        }
        else if (keyCode == 40) {//按下键
            event.preventDefault();
            if (t + 1 < maxY) {
                park.style.top = t + 1 + 'px';
            }
            else {
                park.style.top = maxY + 'px';
            }
            locationUpdata();
        }
    };
    //添加车位
    function addPark() {
        var carMask = $('#car-mask');
        var mapNote = $('#map-div');
        var topMask = carMask.get(0).offsetTop || parseFloat(carMask.get(0).style.top);
        var leftMask = carMask.get(0).offsetLeft || parseFloat(carMask.get(0).style.left);
        var top = topMask + (carMask.height() / 2);
        var left = leftMask + (carMask.width() / 2);

        var context = '<div class="car-font label-park" style="top:' + top +
            'px;left:' + left + 'px;background-color:#38C457;">售</div>';
        mapNote.append(context);
        fontUpdate();
    }
</script>
</body>
</html>